import styles from './register.module.scss'
import { UserOutlined } from '@ant-design/icons';
import {Form, Input,Button, message} from 'antd';
import { useRequest } from 'ahooks';
import { registerApi } from '@/apis/user';



type formType= {
    username: string,
    password: string,
    rePassword: string,
    nickname: string
}

const Register = ()=>{
     const {run} = useRequest(async (values)=>{
      const {username, password, nickname} = values
       await registerApi({username, password, nickname})
     },{
       manual: true,
       onSuccess: ()=>{
         message.success('注册成功')
       }
     })
  

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);

    run(values)
  }

  return (
    <div className={styles.container}>
      {/* 头部 */}
      <div className={styles.header}><UserOutlined style={{marginRight: '5px'}}/>用户注册</div>
      {/* 主体-表单 */}
      <div className={styles.form}>
        <Form<formType>  
          name="register"
          onFinish={onFinish}
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}>
          <Form.Item name="username" label="用户名："  rules={[{ required: true, message: '请输入用户名!' }]}>
            <Input   size='middle'  ></Input>
          </Form.Item>
          <Form.Item name="password" label="密码："  rules={[{ required: true, message: '请输入密码!' }]}>
             <Input size='middle'></Input>
          </Form.Item>
          <Form.Item name="rePassword" label="确认密码："  rules={[{ required: true, message: '请确认密码!' }]}>
             <Input size='middle'></Input>
          </Form.Item>

          <Form.Item name="nickname" label="昵称："  >
             <Input size='middle'></Input>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 10, span: 20 }}>
               <Button  type="primary" htmlType="submit">
                  注册
                </Button>
          </Form.Item>


        </Form>
      </div>
    </div>
  )
}



export default Register;